<template>
	<div class="m-d-c">
		<div class="container dir-left-nowrap gap m-d-c-b">
			<!-- 头像 -->
			<AppAvatar class="box-grow-0" :src="userStroe.avatarUrl ?? ''" round size="160"></AppAvatar>
			<!-- 主页资料 -->
			<div class="box-grow-1 m-d-h-t">
				<!-- 呢称 -->
				<span class="m-d-h-t-n">仓鼠</span>
				<!-- 签名 -->
				<span class="m-d-h-t-s">彼岸连着大海，群山静守伟岸，碧海连天的帆船彼岸连着大海，群山静守伟岸，碧海连天的帆船彼岸连着大海，群山静守伟岸，</span>
				<!-- 说明 -->
				<div>
					<span class="m-d-h-t-n-b" v-for="item in statistics">
						<span class="m-d-h-t-n-t">{{ item.text }}</span>
						<span class="m-d-h-t-n-v">{{ item.value }}</span>
					</span>
				</div>
			</div>
			<!-- 关注和私信按钮 -->
			<div v-if="uid !== '' + userStroe.uid" class="box-grow-0 dir-bottom-nowrap m-d-btn-b">
				<div>
					<div class="main-center cross-center inline-flex m-d-b btn-l " :class="[{ 'isFollow': isFollow }]">
						{{ isFollow ? '已关注' : '关注' }}
					</div>
					<div class="main-center cross-center inline-flex m-d-b btn-r">私信</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
/**
 * 用户页姓名、签名、关注和数据统计组件
 */
import { AppAvatar } from "#components";
import { useUserStore } from "@/stores";

const userStroe = useUserStore()

const uid = useAppRouteParams<string>('uid')

const isFollow = ref(true)
const statistics = ref([
	{
		text: '获赞',
		field: 'likeNum',
		value: '0'
	},
	{
		text: '关注',
		field: 'followNum',
		value: '0'
	},
	{
		text: '收藏',
		field: 'collectNum',
		value: '0'
	},
	{
		text: '粉丝',
		field: 'fansNum',
		value: '0'
	},
])
/**
 * 请求统计数据
 */
function getStatisticsData() {
	const res: Record<string, string> = {
		likeNum: '12002w',
		followNum: '12002w',
		collectNum: '12002w',
		fansNum: '12002w',
	}
	statistics.value.forEach((item) => {
		item.value = res[item.field]
	})

}
getStatisticsData()



/**
 * 关注与取消关注
 */
function changeFollow() {

}
</script>

<style lang="scss" scoped>
.m-d-c {
	/* meDetailsContent */
	height: 208px;
	background-color: #fff;

	.m-d-c-b {
		padding: 24px 0;

		.m-d-h-img {
			/* meDetailsHeadImg */
			width: 160px;
			height: 160px;
			border-radius: 100%;
		}

		.m-d-h-t {
			/* meDetailsHeadText */
			height: 100%;
			position: relative;

			/* width: 480px; */
			.m-d-h-t-n {
				/* meDetailsHeadTextNickname */
				height: 24px;
				font-size: 24px;
				font-weight: 600;
				line-height: 24px;
				margin: 0;
				display: block;
				margin-top: 26px;
			}

			.m-d-h-t-s {
				/* meDetailsHeadTextSignature */
				font-size: 14px;
				font-weight: 400;
				display: block;
				color: #777777;
				margin-top: 10px;
			}

			.m-d-h-t-n-b {
				/* meDetailsHeadTextNotesBox */
				position: absolute;
				top: 114px;
				user-select: none;

				.m-d-h-t-n-t {
					/* meDetailsHeadTextNotesText */
					width: 28px;
					height: 20px;
					font-size: 14px;
					font-weight: 400;
					color: #777777;
					line-height: 20px;
					vertical-align: top;
				}

				.m-d-h-t-n-v {
					/* meDetailsHeadTextNotesValue */
					width: 69px;
					height: 24px;
					font-size: 22px;
					font-weight: 600;
					color: #333333;
					line-height: 24px;
					margin-left: 8px;
				}
			}

			.m-d-h-t-n-b:nth-child(2) {
				left: 150px;
			}

			.m-d-h-t-n-b:nth-child(3) {
				left: 300px;
			}

			.m-d-h-t-n-b:nth-child(4) {
				left: 450px;
			}
		}

		.m-d-btn-b {
			.m-d-b {
				/* meDetailsButton */
				width: 120px;
				height: 40px;
				border-radius: 8px;
				font-size: 14px;
				cursor: pointer;
			}

			.btn-l {
				background-color: #f9688f;
				color: #fff;
				transition: all 0.3s;

				&:hover {
					background-color: #ff85ad;
				}

				&.isFollow {
					margin-left: 20px;
					border: #999999 solid 1px;
					background-color: #fff;
					color: #333333;
					transition: all 0.3s;

					&:hover {
						background-color: #ff85ad;
					}
				}
			}

			.btn-r {
				margin-left: 20px;
				border: #999999 solid 1px;
				background-color: #fff;
				color: #333333;
			}
		}
	}
}
</style>
